<template>
    <li class="list__item" v-if="isShow">
        <input class="checkbox-input" :checked="text.isChecked" type="checkbox" />
        <span class="checkbox" @click="clickCheckBox"></span>
        <label>{{text.content}}</label>
        <span class="deleteBtn" @click="deleteItem"><i class="iconfont icon-cha"></i></span>
    </li>
</template>

<script>
    import bus from '../asset/eventBus.js'
    export default {
        props: {
            item: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                text: this.item,
                isShow: true
            }
        },
        methods: {
            clickCheckBox: function() {
                const text = this.text;
                this.$emit('changeData',text.id)
                bus.$emit('refreshPage')
            },
            deleteItem: function() {
                this.$emit('deleteItem',this.text.id)
            },
            changeChecked: function(msg) {
                const that = this,
                     isShow = that.isShow;
                if(msg === 'all') {
                    that.isShow = true
                }
                if(msg === 'active') {
                    that.isShow = !that.text.isChecked;
                }
                if(msg === 'completed') {
                    that.isShow = that.text.isChecked;
                }
            }
        },
        created: function () {
            let that = this;
            bus.$on('status',function(msg) {
                that.changeChecked(msg)
            })
        }
    };
</script>

<style scoped>
    .list__item {
        position: relative;
        padding: 20px;
        background: #fff;
        border-bottom: 1px solid #ededed;
        color: #bbb;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
    }
    input[type=checkbox] {
        display: none;
    }
    .checkbox {
        display: inline-block;
        height: 20px;
        width: 20px;
        margin-right: 10px;
        border: 1px solid #eee;
        border-radius: 50%;
        vertical-align: -5px;
        cursor: pointer;
    }
    input[type=checkbox]:checked + .checkbox{
        background: url(../asset/image/checked.png) center no-repeat;
        background-size: 90%;
    }
    .deleteBtn {
        position: absolute;
        right: 0;
        top: 0;
        padding: 20px;
        cursor: pointer;
        color: #fff;
    }
    .deleteBtn:hover {
        color: #bfbfbf;
    }
</style>